import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import FolderContainer from './preview-child';
import { findDOMNode } from 'react-dom';
import store from '../../store';
import axios from 'axios';
import { getPreview } from '../../api/getPreview';

class PreviewChild extends Component{

    componentDidMount(){
        this.initUpload();
    }

    showMenu(e){
        e.preventDefault()
        var container = findDOMNode(this);
        var menu = $(this.refs.operation)
        $('#rename-preview').hide();
        $('#delete-preview').hide();
        var evt = e || window.event;
        var rightedge = e.clientX - container.offsetLeft;
        var bottomedge = document.body.clientHeight -e.clientY;

        if(rightedge < menu.width()){
            menu.css('left', e.clientX + 'px')
        }else{
            menu.css('left', e.clientX - menu.width() + 'px')
        }

        if(bottomedge < menu.height()){
            console.log(menu.height())
            menu.css('top', e.clientY - menu.height() + 'px')
        }else{
            menu.css('top', e.clientY + 'px')
        }

        $('#folder-operation').hide();
        $('#preview-operation').show();
        return false; 
    }

    newMenu(e){
        e.stopPropagation();
        store.dispatch({
            type: 'NEW_PREVIEW',
            newPreview: true
        });

        $('#new-preview-input').val('');
        $('.backcover').show();
        $('#new-preview-error').hide();
    }

    rename(){
        var { activeFolder } =this.props;
        
        if(activeFolder === ''){
            store.dispatch({
                type: 'ACTIVE_FOLDER',
                activeFolder: $('#folder-list .active span').html()
            })
        }

        store.dispatch({
            type: 'RENAME_PREVIEW',
            renamePreview: true
        });
        $('.backcover').show();
        $('#rename-preview-input').val('');
    }

    deletePreview(){

        var { activeFolder } = this.props;
        
        if(activeFolder === '') {
            store.dispatch({
                type: 'ACTIVE_FOLDER',
                activeFolder: $('#folder-list .active span').html()
            })
        }

        store.dispatch({
            type: 'DELETE_PREVIEW',
            deletePreview: true
        });


        $('.backcover').show();  
    }

    
    initUpload(){

        var _that = this;
        

        $('#upload-preview').uploadify({
            height: 40,
            swf: '/script/vendor/uploadify/uploadify.swf',
            uploader: '/uploadFile',
            buttonText: '上传',
            fileObjName: 'file',
            width: 120,
            onUploadComplete: function(file, data, response){
                $('#preview-operation').hide();
                _that.newFolderAndSelect();
            }
        })

        $('#upload-preview').click(function(e){
            e.stopPropagation();
        })
    }

    newFolderAndSelect(){
        var name = "上传文件"
        var { folderList } = this.props;
        var hasFolder = folderList.find((value, index, arr) => {
            return (value.name === name) ? true : false ; 
        });

        if (!hasFolder) {
            var _state = {
                name: name,
                active: '',
                rename: true,
                id: 'upload'
            } ;
            store.dispatch({
                type: 'GET_FOLDER',
                folderList: [...store.getState().folderReducer.folderList, _state]
            });
        }

        $('#folder-list li').removeClass('active');
        $('#folder-list li[data-type="upload"]').addClass('active');
        getPreview(name)
        $('.preview-child').removeClass('active');
        store.dispatch({
            type: 'ACTIVE_FOLDER',
            activeFolder: name
        });
    }

    render(){
        var { previewList, folderList } = this.props;

        var classs = 'new-btn hide'
        if((!previewList || previewList <=0) && (folderList && folderList.length > 0)){
            classs = 'new-btn'
        }

        var previewLi = previewList.map(function(preview, i){
            return <FolderContainer preview={ preview } key={ i }/>
        })
        return (
            <section id="preview" onContextMenu = {this.showMenu.bind(this)}>
            <section id="preview-operation" ref="operation">
                <ul>
                    <li onClick={this.newMenu.bind(this)} id="new-preview"><i className="icon-plus"></i>新建</li>
                    <li style={{padding:0}}><input type="file" id="upload-preview"/></li>
                    <li id="rename-preview" onClick={this.rename.bind(this)}>重命名</li>
                    <li id="delete-preview"  onClick={this.deletePreview.bind(this)}><i className="icon-trash"></i>删除</li>
                </ul>
            </section>
            
            <ul>
                { previewLi }
            </ul>
            <div className={classs}  onClick={this.newMenu.bind(this)}>
                <i className="icon-plus"></i>
                <p>新建文件</p>
            </div>
        </section>
        )
    }
}

const mapStateToProps  = (state) => {
    return {
        folderList: state.folderReducer.folderList,
        previewList: state.previewReducer.previewList,
        activeFolder:  state.folderReducer.activeFolder
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(PreviewChild);